<template>
    <div>
        付薪前
        <!-- 付薪进度 -->
        <div id='payTotal' class="payOptionTotal"></div>
        <!-- 进度明细 -->
        <div id='scheduleDetails' class="scheduleDetails"></div>
        <!-- 派遣 -->
        <div id='traineePayOptionTotal' class="traineePayOptionTotal"></div>
        <!-- 进度明细 -->
        <div id='traineeScheduleDetails' class="traineeScheduleDetails"></div>

    </div>
</template>

<script>
    export default {
        props: ['payType', 'stationPerson'],
        watch: {
            stationPerson() {
                this.getUpdate()
            }
        },
        data() {
            return {
                payOptionTotalOption: {},
                scheduleDetailsOption: {},
                traineePayOptionTotalOption: {},
                traineeScheduleDetailsOption: {}
            }
        },
        mounted() {
            this.getUpdate()
        },
        methods: {
            getUpdate() {
                this.getPayTotal()//付薪进度总览
                this.getScheduleDetails()// 平台进度明细
                let payOptionTotal = this.$echarts.init(
                    document.getElementById("payTotal")
                );
                payOptionTotal.clear()
                payOptionTotal.setOption(this.payOptionTotalOption, false);
                let scheduleDetails = this.$echarts.init(
                    document.getElementById("scheduleDetails")
                );
                scheduleDetails.clear()
                scheduleDetails.setOption(this.scheduleDetailsOption, false);
                let traineePayOptionTotal = this.$echarts.init(
                    document.getElementById("traineePayOptionTotal")
                );
                traineePayOptionTotal.clear()
                traineePayOptionTotal.setOption(this.traineePayOptionTotalOption, false);
                let traineeScheduleDetails = this.$echarts.init(
                    document.getElementById("traineeScheduleDetails")
                );
                traineeScheduleDetails.clear()
                traineeScheduleDetails.setOption(this.traineeScheduleDetailsOption, false);
                window.onresize = function () {
                    payOptionTotal.resize();
                    scheduleDetails.resize();
                    traineePayOptionTotal.resize();
                    traineeScheduleDetails.resize();
                }
            },
            getPayTotal() {
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     x: 'left',
                    //     // data: ['直达', '营销广告', '搜索引擎', '邮件营销']
                    // },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['20%', '40%'],
                            center: ['50%', '35%'],
                            label: {
                                normal: {
                                    // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    formatter: '{c} ',
                                    backgroundColor: '#efefef',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    // padding: [0, 7],
                                    // rich: {
                                    //     a: {
                                    //         color: '#999',
                                    //         lineHeight: 22,
                                    //         align: 'center'
                                    //     },
                                    //     // abg: {
                                    //     //     backgroundColor: '#333',
                                    //     //     width: '100%',
                                    //     //     align: 'right',
                                    //     //     height: 22,
                                    //     //     borderRadius: [4, 4, 0, 0]
                                    //     // },
                                    //     hr: {
                                    //         borderColor: '#aaa',
                                    //         width: '100%',
                                    //         borderWidth: 0.5,
                                    //         height: 0
                                    //     },
                                    //     b: {
                                    //         fontSize: 12,
                                    //         lineHeight: 14
                                    //     },
                                    //     per: {
                                    //         color: '#eee',
                                    //         backgroundColor: '#334455',
                                    //         padding: [2, 4],
                                    //         borderRadius: 2
                                    //     }
                                    // }
                                }
                            },
                            data: [
                                { value: 335, name: '直达' },
                                { value: 310, name: '营销广告' },
                                { value: 234, name: '搜索引擎' },
                                { value: 135, name: '邮件营销' },
                            ]
                        }
                    ]
                }
                if (this.stationPerson == 1) {
                    //平台,责任人 
                    this.payOptionTotalOption = JSON.parse(JSON.stringify(option))
                    this.traineePayOptionTotalOption = JSON.parse(JSON.stringify(option))
                } else {
                    this.payOptionTotalOption = JSON.parse(JSON.stringify(option))
                    this.traineePayOptionTotalOption = JSON.parse(JSON.stringify(option))
                }
            },
            getScheduleDetails() {
                this.scheduleDetailsOption = {
                    //   title: {
                    //     text: this.overTimeTitleList[1],
                    //     left: "center",
                    //     textStyle: this.globalVariable.fontColor
                    //   },
                    legend: {
                        data: ["直接访问", "邮件营销"],
                        textStyle: this.globalVariable.legendTextStyle,
                        top: 12,
                        left: "center"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine,
                        splitLine: this.globalVariable.splitLine
                    },
                    yAxis: {
                        type: "category",
                        data: [],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine
                    },
                    // dataZoom: this.globalVariable.dataZoom,
                    series: []
                };
                if (this.stationPerson == 1) { //平台,责任人 
                    let legend = ["业务审批", "共享审批", "支付中", "已支付"];
                    let colorList = ["red", "blue", "pink", "green"];
                    this.scheduleDetailsOption.yAxis.data = ['长三角', '华南', '环渤海', '西南']
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.scheduleDetailsOption.series.push(obj);
                    });
                    this.scheduleDetailsOption.series[0].data = [22, 33, 44, 55]
                    this.scheduleDetailsOption.series[1].data = [11, 12, 21, 31]
                    this.scheduleDetailsOption.series[2].data = [31, 32, 34, 33]
                    this.scheduleDetailsOption.series[3].data = [41, 42, 43, 44]
                } else { // 台长
                    this.scheduleDetailsOption.yAxis.data = ["华南", "西南", "贵州", "海南", "武汉", "西安"];
                    let legend = ["华南", "西南", "贵州", "海南", "武汉", "西安"];
                    let colorList = ["red", "blue", "pink", 'yellow'];
                    colorList.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.scheduleDetailsOption.series.push(obj);
                    });
                    this.scheduleDetailsOption.series[0].data = [22, 33, 44, 55, 61, 41]
                    this.scheduleDetailsOption.series[1].data = [11, 12, 21, 31, 34, 36]
                    this.scheduleDetailsOption.series[2].data = [31, 32, 34, 33, 41, 32]
                    this.scheduleDetailsOption.series[3].data = [41, 42, 43, 44, 22, 44]
                }
                this.traineeScheduleDetailsOption = {
                    //   title: {
                    //     text: this.overTimeTitleList[1],
                    //     left: "center",
                    //     textStyle: this.globalVariable.fontColor
                    //   },
                    legend: {
                        data: ["直接访问", "邮件营销"],
                        textStyle: this.globalVariable.legendTextStyle,
                        top: 12,
                        left: "center"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine,
                        splitLine: this.globalVariable.splitLine
                    },
                    yAxis: {
                        type: "category",
                        data: [],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine
                    },
                    // dataZoom: this.globalVariable.dataZoom,
                    series: []
                };
                if (this.stationPerson == 1) { //平台,责任人 
                    let legend = ["业务审批", "共享审批", "支付中", "已支付"];
                    let colorList = ["red", "blue", "pink", "green"];
                    this.traineeScheduleDetailsOption.yAxis.data = ['长三角', '华南', '环渤海', '西南']
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.traineeScheduleDetailsOption.series.push(obj);
                    });
                    this.traineeScheduleDetailsOption.series[0].data = [22, 33, 44, 55]
                    this.traineeScheduleDetailsOption.series[1].data = [11, 12, 21, 31]
                    this.traineeScheduleDetailsOption.series[2].data = [31, 32, 34, 33]
                    this.traineeScheduleDetailsOption.series[3].data = [41, 42, 43, 44]
                } else { // 台长
                    this.traineeScheduleDetailsOption.yAxis.data = ["华南", "西南", "贵州", "海南", "武汉", "西安"];
                    let legend = ["华南", "西南", "贵州", "海南", "武汉", "西安"];
                    let colorList = ["red", "blue", "pink", 'yellow'];
                    colorList.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.traineeScheduleDetailsOption.series.push(obj);
                    });
                    this.traineeScheduleDetailsOption.series[0].data = [22, 33, 44, 55, 61, 41]
                    this.traineeScheduleDetailsOption.series[1].data = [11, 12, 21, 31, 34, 36]
                    this.traineeScheduleDetailsOption.series[2].data = [31, 32, 34, 33, 41, 32]
                    this.traineeScheduleDetailsOption.series[3].data = [41, 42, 43, 44, 22, 44]
                }
            }
        },
    };
</script>
<style>
    .payOptionTotal,
    .scheduleDetails,
    .traineePayOptionTotal,
    .traineeScheduleDetails {
        height: 4rem;
    }
</style>